<template>
  <page-view class="category-page">
    <page-header title="分类"></page-header>
    <div class="wrapper">
      <!-- 选项卡 -->
      <div class="menu-wrapper">
        <ul>
          <li
            v-for="(item, index) in menus"
            :key="index"
            :class="{ actived: actived === index }"
            @click.stop="checkMenu(index)"
          >
            {{ item.category_name }}
          </li>
        </ul>
      </div>
      <!-- 内容 -->
      <div class="item-wrapper" ref="itemWrapper">
        <!-- 要当页面渲染完成后再去操作 -->
        <ul>
          <li v-for="(item, index) in menus" :key="index">
            <p class="category-name">{{ item.category_name }}</p>
            <food-item
              v-for="(f_item, f_index) in item.foodInfoList"
              :key="f_index"
              :f_item="f_item"
            >
              <img v-lazy="f_item.food_img" @load="loadImage" />
            </food-item>
          </li>
        </ul>
      </div>
    </div>
  </page-view>
</template>

<!-- css动画和js的动画区别 -->
<script>
import PageHeader from "@/components/PageHeader.vue";
import BScroll from "better-scroll";
import api from "@/utils/api";
import { getCurrentInstance, ref, reactive } from "vue";
import { onMounted } from "@vue/runtime-core";
import FoodItem from "@/components/FoodItem.vue";
export default {
  components: { PageHeader, FoodItem },
  name: "Category",
  setup() {
    const { proxy } = getCurrentInstance();
    let scroll = null;
    //分类和对应的内容的数据（menu,foodList）
    const menus = reactive([]);
    //开始选中的分类
    let actived = ref(0);
    //记录加载成功的数据
    let onload = 0;
    //左边的点击事件
    function checkMenu(index) {
      // index为元素下标
      actived.value = index;
      let itemList = proxy.$refs.itemWrapper.children[0].children;
      //位偏移量（获取元素为重点）去指定元素的位置,时间
      scroll.scrollToElement(itemList[index], 300);
      console.log(itemList);
    }

    //图片被加载
    function loadImage() {
      let length = 0;
      menus.forEach((item) => {
        length += item.foodInfoList.length;
      });
      onload++;
      //当图片全部被加载完成后执行内容高度计算的
      if (onload == length) {
        initScroll();
      }
    }

    //scroll
    function initScroll() {
      scroll = new BScroll(proxy.$refs.itemWrapper, {
        // （时间派发）
        //3为两边都会触发（任何滚动都能监听）
        //1为左边触发 （监听方式不同）
        probeType: 3,
        //y轴触发
        scrollY: true,
        //事件冒泡就出来了(true)
        click: true,
        //回弹动画
        bounce: true,
      });
      onScroll();
    }

    //onScroll()在滚动中触发(滚动事件的监听)
    function onScroll() {
      scroll.on("scroll", (position) => {
        console.log(position);
      });
    }

    //获取分类数据
    const getAllCategory = async () => {
      const res = await api.categoryInfo.getAllList();
      res.forEach((item) => {
        item.foodInfoList.forEach((item2) => {
          item2.food_img = proxy.BaseURL + item2.food_img;
        });
        menus.push(item);
      });
    };
    onMounted(() => {
      getAllCategory();
    });
    return { menus, actived, checkMenu, loadImage };
  },
};
</script>

<style lang="scss" scoped>
.category-page {
  @include flexbox(column);
  .wrapper {
    flex: 1;
    margin-bottom: 60px;
    overflow: hidden;
    @include flexbox(row);
    .menu-wrapper {
      overflow: auto;
      ul li {
        width: 5rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 1rem;
        background-color: aquamarine;
      }
    }
    .item-wrapper {
      flex: 1;
      overflow: hidden;
      .category-name {
        font-size: 22px;
        font-weight: bold;
        box-sizing: border-box;
        padding: 5px;
      }
    }
  }
}
.actived {
  background-color: aliceblue !important;
}
.left-img {
  width: 110px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
